<template>
    <div>
        <el-dialog v-model="visible" :title="formData.form.title" :close-on-click-modal="false"
            :close-on-press-escape="false" @close="closeDialog" width="618">
            <el-form ref="formRef" :rules="rules" :model="formData.form" style="border-top: 1px solid #d0d3d9;">
                <el-form-item required label="分类名称" label-width="85px" prop="name" :rules="[
                    { required: true, message: '分类名称不能为空！' }
                ]" style="width: 320px;padding-top: 30px;margin-left: 52px;">
                    <el-input v-model="formData.form.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog" class="btnhover"
                        style="width: 80px;height: 30px;background-color: rgba(255, 255, 255, 1);border: 1px solid rgba(187, 187, 187, 1);color: rgba(142, 142, 142, 1);">取消</el-button>
                    <el-button @click="besurebtn" class="btnhover"
                        style="width: 80px;height: 30px;background-color: #FF9900;border: 1px solid #FF9900;color: rgba(255,255,255,1);">
                        确认 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import * as getlearnApi from '@/api/spb/partyMemberLearning/index'
const formRef = ref() // 表单 Ref

const formData = reactive({
    form: {
        name: '',
        id: '',
        title: '',
    }
})
const props = defineProps({
    visible: Boolean,
    editData: {
        type: Object
    }
})
const emit = defineEmits(['update:visible', 'geteditData'])

const visible = computed({
    get: () => {
        return props.visible
    },
    set: (val) => emit('update:visible', val)
})
watch(() => props.editData, (val) => {
    if (val) {
        formData.form.name = val.name
        formData.form.title = val.dialogtitle
        formData.form.id = val.id
    }
}, { immediate: true })

/** 取消 */
const closeDialog = () => {
    visible.value = false
}
/** 确定 */
const besurebtn = async () => {
    await formRef.value.validate()
    if (formData.form.title === '新增分类') {
        ElMessageBox.confirm(
            '是否确认新增分类?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            getlearnApi.createType(formData.form).then((res) => {
                if (res) {
                    ElMessage.success('新增成功！')
                    emit('geteditData', props.editData.pageNo)
                    visible.value = false
                }
            })
        })
            .catch(() => {
                ElMessage.info('已取消新增分类')
            })
    }
    if (formData.form.title === '编辑分类') {
        ElMessageBox.confirm(
            '是否确认编辑分类?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            getlearnApi.updateType(formData.form).then((res) => {
                if (res) {
                    ElMessage.success('修改成功！')
                    emit('geteditData', props.editData.pageNo)
                    visible.value = false
                }
            })
        })
            .catch(() => {
                ElMessage.info('已取消编辑分类')
            })
    }
}



onMounted(() => { })
</script>
<style scoped>
::v-deep .el-dialog__body {
    padding: 10px 0 !important;
}

.btnhover:hover {
    opacity: 0.8;
}
</style>